import React, { useEffect } from 'react';
import { Redirect } from 'umi';
import { connect } from 'dva';
import { Spin } from 'antd';
import BarChart from './components/BarChart';
import GaugeChart from './components/GaugeChart';
import NumberFormat from './components/NumberFormat';
import ScrollTable from '@/components/ScrollTable';
import Header from './components/Header';
import Scene from './Scene';
import monitorBg from '../../../../public/monitor_bg.jpg';
import Icons from '../../../../public/platform.png';
import style from './FrozenStation.css';


function FrozenStation({ dispatch, user, monitor }){
    let { userInfo, companyList, msg, userMenu, currentMenu, routePath, authorized, containerWidth } = user;
    let { monitorInfo } = monitor;
    let loaded = Object.keys(monitorInfo).length ? true : false;
    useEffect(()=>{
        
    },[]);
    useEffect(()=>{
        if ( authorized ){
            dispatch({ type:'monitor/fetchMonitorInfo'});
        }
    },[authorized]);
    return (       
        <div className={style['container']} style={{ backgroundImage:`url(${monitorBg})`}}>
            
            <Header />

            {/* 制冷站场景模型 */}
            <Scene />
            
            <div className={style['float-container']} style={{ left:'1rem', top:'70px', height :'100%' }}>
                {/* 运行概况 */}
                <div className={style['card-container']} style={{ height:'30%' }}>
                    <div className={style['card-title']} style={{ color:'#fff', fontWeight:'normal' }}>运行概览</div>
                    <div className={style['card-content']} style={{ padding:'0.5rem 0', color:'#fff' }}>
                        <div>
                            <div style={{ color:'rgba(255, 255, 255, 0.65)' }}>本月用电量</div>
                            <div style={{ fontSize:'2rem', color:'#5ab4f1', marginBottom:'1rem' }}>{ monitorInfo.localMonthEleUsage || 0 } kwh</div>
                        </div>
                        <div className={style['flex-container']}>
                        {
                            monitorInfo.infoList && monitorInfo.infoList.length 
                            ?                          
                            monitorInfo.infoList.map((item,index)=>{                         
                                return (
                                <div key={index} className={style['flex-item']}>
                                    <div className={style['flex-icon']} style={{
                                        backgroundImage:`url(${Icons})`,
                                        backgroundPosition:`-${index*38}px 0`
                                    }}></div>
                                    <div className={style['flex-content']}>
                                        <div className={style['flex-text']}>{ item.title }</div>
                                        <div>
                                            <span className={style['flex-data']}>{ item.value }</span>
                                            <span className={style['flex-unit']}>{ item.unit }</span>
                                        </div>
                                    </div>
                                </div>
                            )})                        
                            :
                            <Spin className={style['spin']} />
                        } 
                        </div>
                    </div>
                </div>
                {/* 制冷站能效EER */}
                <div className={style['card-container']} style={{ height:'32%' }}>
                    <div className={style['card-title']} style={{ color:'#fff', fontWeight:'normal' }}>当前制冷站能效EER</div>
                    <div className={style['card-content']}>
                        {
                            loaded 
                            ?
                            <GaugeChart />
                            :
                            <Spin className={style['spin']} />
                        }
                    </div>
                </div>
                {/* 制冷站COP */}
                <div className={style['card-container']} style={{ height:'32%' }}>
                    <div className={style['card-title']} style={{ color:'#fff', fontWeight:'normal' }}>当前制冷站COP</div>
                    <div className={style['card-content']}>
                        {
                            loaded 
                            ?
                            <GaugeChart forCOP={true} />
                            :
                            <Spin className={style['spin']} />
                        }
                    </div>
                </div>
            </div>

            <div className={style['float-container']} style={{ right:'1rem', top:'70px', height:'100%' }}>
                {/* 本月累计节省电量 */}
                <div className={style['card-container']} style={{ height:'12%' }}>
                    <div className={style['card-title']} style={{ color:'#fff', fontWeight:'normal' }}>本月累计节省电量</div>
                    <div className={style['card-content']} style={{ paddingTop:'1rem' }}>
                        {
                            loaded 
                            ?
                            <NumberFormat data={monitorInfo.localInstantaneousSaveEle || 0 } containerWidth={containerWidth} />
                            :
                            <Spin className={style['spin']} />
                        }
                    </div>
                </div>
                {/* 近7日耗电量 */}
                <div className={style['card-container']} style={{ height:'20%' }}>
                    <div className={style['card-title']} style={{ color:'#fff', fontWeight:'normal' }}><div>近7日耗电量<span className={style['sub-text']} style={{ color:'rgba(255, 255, 255, 0.6)'}}>(kwh)</span></div></div>
                    <div className={style['card-content']} style={{ padding:'0' }}>
                        {
                            loaded
                            ?
                            <BarChart data={monitorInfo.sevenDayEleUsageList} title='耗电量' />
                            :
                            <Spin className={style['spin']} />
                        }
                    </div>
                </div>
                {/* 近7日EER */}
                <div className={style['card-container']} style={{ height:'20%' }}>
                    <div className={style['card-title']} style={{ color:'#fff', fontWeight:'normal' }}><div>近7日EER<span className={style['sub-text']} style={{ color:'rgba(255, 255, 255, 0.6)'}}>(kw/kw)</span></div></div>
                    <div className={style['card-content']} style={{ padding:'0' }}>
                        {
                            loaded
                            ?
                            <BarChart data={monitorInfo.sevenDayEERList} title='EER' />
                            :
                            <Spin className={style['spin']} />
                        }
                    </div>
                </div>
                {/* 近7日COP趋势 */}
                <div className={style['card-container']} style={{ height:'20%' }}>
                    <div className={style['card-title']} style={{ color:'#fff', fontWeight:'normal' }}><div>近7日COP趋势</div></div>
                    <div className={style['card-content']} style={{ padding:'0' }}>
                        {
                            loaded
                            ?
                            <BarChart data={monitorInfo.sevenDayCOPList} title='COP' type='line' />
                            :
                            <Spin className={style['spin']} />
                        }
                    </div>
                </div>
                {/* 告警列表 */}
                <div className={style['card-container']} style={{ height:'22%' }}>
                    <div className={style['card-title']} style={{ color:'#fff', fontWeight:'normal' }}>告警列表</div>
                    <div className={style['card-content']} style={{ padding:'0' }}>
                        {
                            loaded 
                            ?
                            <ScrollTable 
                                thead={[{ title:'位置', dataIndex:'region_name', width:'22%', collapse:true }, { title:'设备', dataIndex:'mach_name', width:'32%', collapse:true }, { title:'分类', dataIndex:'type_name', width:'30%', border:true }, { title:'时间', dataIndex:'last_warning_time', type:'time', width:'16%' }]}
                                data={[]} 
                                scrollNum={4}
                            />
                            :
                            <Spin className={style['spin']} />
                        }
                        
                    </div>
                </div>
            </div>
        </div>
       
    )
}

export default connect(({ user, monitor })=>({ user, monitor }))(FrozenStation);